CSS : Exercices sur les pages responsives

Dans cet exercice, vous allez créer une page web simple qui s'adapte à différentes tailles d'écran (desktop, tablette, mobile). L'objectif est de mettre en pratique les principes du design web responsive que vous avez appris jusqu'à présent.

Comme pour les autres exercices, inventez une nouvelle page à votre sujet, je ne vais pas revenir dessus à chaque fois, mais développez votre sujet, si vous avez pris "la chanson française" faites par exemple une page sur tous les plus grands hits de François Juno !

1. Créez un fichier HTML contenant la structure de base de votre page web. Incluez un en-tête (<header>), une section de contenu (<main>), et un pied de page (<footer>).

2. Ajoutez un titre à votre page en utilisant la balise <title>.

3. Créez une navigation simple en utilisant une liste non ordonnée (<ul>) avec au moins 3 liens (<li>) vers différentes sections de la page.

4. Utilisez des balises sémantiques pour structurer votre contenu. Utilisez des balises comme <section>, <article>, <aside>, etc., pour organiser le contenu de manière significative.

5. Stylez votre page avec CSS pour lui donner une apparence attrayante. Vous pouvez personnaliser la police, les couleurs, la mise en page, etc. Assurez-vous d'inclure un fichier CSS externe lié à votre page. Mettez des couleurs de fond à vos div, utilisez des flexbox, mettez des textes et des images !

6. Rendez la page responsive en utilisant les média queries. Assurez-vous que votre page a un aspect approprié sur des écrans de différentes tailles (desktop, tablette, mobile).

7. Testez votre page en redimensionnant votre navigateur pour voir comment elle réagit aux différentes tailles d'écran.

• Ajoutez des animations simples pour améliorer l'expérience utilisateur. Par exemple, vous pouvez animer le menu de navigation lorsque l'utilisateur le survole.

• Optimisez votre page pour l'impression en utilisant des styles CSS spécifiques pour les impressions. Assurez-vous que votre page est lisible lorsqu'elle est imprimée.

• Validez votre code HTML et CSS en utilisant des outils en ligne tels que le validateur HTML du W3C et le validateur CSS. Assurez-vous que votre code est conforme aux normes.

Une fois que vous avez terminé votre page web responsive, utilisez un outil de vérification en ligne que je vous ai proposé au cours, et appelez moi pour que je puisse regarder à ça !